<template>
    <div class="input">
        <div class="input-up"> 
            <span>用户名：</span><input type="text" v-model.trim="username">
        </div>
        <div class="input-down">
            评论内容：<textarea id="" cols="30" rows="10" v-model.trim="content"></textarea>
        </div>
        <button class="submit" @click="submitContent">发布</button>
    </div>
</template>

<script lang="ts" name="CommentInput" setup>
import { ref,defineEmits,onBeforeMount } from 'vue'
let username=ref('')
let content=ref('')
const emit=defineEmits(['sent-comment'])
onBeforeMount(() => {
    loadData()
})
function loadData(){
    const loadname = sessionStorage.getItem('username')
    if(loadname){
    username.value = loadname
    console.log(loadname)
    }
}
function saveData(){
    sessionStorage.setItem('username', username.value)
}

function submitContent(){
    if(username.value&&content.value){
        emit('sent-comment',{username:username.value,content:content.value})
        saveData();
        content.value=''
    }
    else if(!username.value){
        alert('请输入用户名')
    }
    else if(!content.value){
      alert('请输入评论内容')
    }
}
</script>

<style scoped>
.input{
    width: 100%;
    display: flex;
    flex-direction: column;
    /* background-color: pink; */
    border: 1px solid #ddd;
    padding: 20px;
}
.input-up,.input-down{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
.input-up input{
    width: 80%;
    padding: 5px 10px;
    outline: none;
}
.input-down textarea{
    width: 80%;
    height: 150px;
    padding: 5px 10px;
    resize: none;
    outline: none;

}
.submit{
    align-self: flex-end;
    padding: 5px 30px;
}
</style>